<template>
  <div>
    <div class="screen-search layout-container out-border">
      <div class="screen-header d-flex justify-content-between">
        <div class="screen-l">
          <i class="el-icon-search"></i>
          <span class="txt">筛选搜索</span>
        </div>
        <div class="screen-r">
          <el-button size="mini">重置</el-button>
          <el-button type="primary" @click.prevent="handlesearchData" size="mini">查询结果</el-button>
        </div>
      </div>
      <div class="submit-container">
        <el-form ref="screenFormInfo" :model="screenFormInfo" class="form-conten t d-flex flex-wrap">
          <div class="form-item mb-3 d-flex">
            <label class="form-item-title">输入搜索:</label>
            <el-input v-model="screenFormInfo.keyword" placeholder="商品名称" class="input-size"></el-input>
          </div>
          <div class="form-item mr-3 mb-3 d-flex">
            <label class="form-item-title">商品货号:</label>
            <el-input v-model="screenFormInfo.productSn" placeholder="商品名称" class="input-size"></el-input>
          </div>
          <div class="form-item mr-3 mb-3 d-flex">
            <label class="form-item-title">商品分类:</label>
            <el-cascader :options="classifysData" :props="classifysOptions" clearable=""> </el-cascader>
          </div>
          <div class="form-item mr-3 mb-3 d-flex">
            <label class="form-item-title">商品品牌:</label>
            <el-cascader :options="brandsData" :props="brandsOptions" clearable=""> </el-cascader>
          </div>
          <div class="form-item mr-3 mb-3 d-flex">
            <label class="form-item-title">上架状态:</label>
            <!-- <el-cascader :options="brandsData" :props="brandsOptions" clearable=""> </el-cascader> -->
          </div>
          <div class="form-item mr-3 mb-3 d-flex">
            <label class="form-item-title">审核状态:</label>
            <!-- <el-cascader :options="brandsData" :props="brandsOptions" clearable=""> </el-cascader> -->
          </div>
        </el-form>
      </div>
    </div>
    <div class="dataList out-border d-flex justify-content-between layout-top">
      <div class="screen-l">
        <i class="el-icon-tickets"></i>
        <span class="txt">数据列表</span>
      </div>
      <el-button class="addtask" size="small" @click="() => this.$router.push('/pms/addProduct')">添加</el-button>
    </div>
    <div class="productTable layout-top">
      <el-table v-loading="loading" :data="productList" height="250" border style="width: 100%">
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
        <el-table-column label="编号" width="100" align="center">
          <template v-slot:default="scope">
            <span>{{ scope.row.brandId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品图片" align="center">
          <template v-slot:default="scope">
            <img :src="scope.row.pic" style="width: 80px; height: 80px" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template v-slot:default="scope">
            <p>{{ scope.row.name }}</p>
            <p>品牌: {{ scope.row.brandName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格/货号" align="center">
          <template v-slot:default="scope">
            <p>价格:￥{{ scope.row.price }}</p>
            <p>货号:{{ scope.row.productSn }}</p>
          </template>
        </el-table-column>
        <el-table-column label="标签" align="center">
          <template v-slot:default="scope">
            <div class="layout-flex">
              <span>上架</span><el-switch v-model="scope.row.publishStatus" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#DCDFE6" @change="pubulicStatus"> </el-switch>
            </div>
            <div class="layout-flex">
              <span>新品</span><el-switch v-model="scope.row.newStatus" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#DCDFE6" @change="newStatus"> </el-switch>
            </div>
            <div class="layout-flex">
              <span>推荐</span><el-switch v-model="scope.row.recommandStatus" :active-value="1" :inactive-value="0" active-color="#409EFF" inactive-color="#DCDFE6" @change="commonStatus"> </el-switch>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="排序" align="center">
          <template v-slot:default="scope">
            <div>{{ scope.row.sort }}</div>
          </template>
        </el-table-column>
        <el-table-column label="SKU库存" align="center">
          <template v-slot:default="scope">
            <el-button type="primary" icon="el-icon-edit" circle style="padding: 15px" @click="handlerFetchSKU(scope.row)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="销量" align="center">
          <template v-slot:default="scope">
            <div>{{ scope.row.sale }}</div>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center">
          <template>
            <p class="default-txt">未审核</p>
            <p class="primary-txt">审核详情</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template v-slot:default="scope"
            ><span><el-button size="mini">查看</el-button></span> <span><el-button size="mini">编辑</el-button></span
            ><span><el-button size="mini">日志</el-button></span
            ><span><el-button type="danger" @click="open(scope.row.id)" size="mini">删除</el-button></span></template
          >
        </el-table-column>
      </el-table>
    </div>
    <div class="d-flex justify-content-between align-items-center mt-2">
      <div>
        <el-select v-model="value" placeholder="批量处理">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-button type="primary">确定</el-button>
      </div>
      <div class="block">
        <el-pagination
          background="true"
          @size-change="getProductList"
          @current-change="getProductList"
          :current-page.sync="query.pageNum"
          :page-sizes="[5, 10, 15]"
          :page-size.sync="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="编辑货品信息" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <div>
        <span>商品货号</span>
        <span>{{ this.currentProductSn }}</span>
        <div class="d-inline-block mr-2"><el-input v-model="input" placeholder="按sku编号搜索"></el-input><el-button class="search-btn" icon="el-icon-search"></el-button></div>
        <el-table :data="skuSave" border style="width: 100%">
          <el-table-column label="SKU编号" align="center">
            <template v-slot:default="scope">
              <el-input v-model="scope.row.skuCode"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="颜色" align="center">
            <template slot-scope="scope">
              {{ JSON.parse(scope.row.spData)[0].value }}
            </template>
          </el-table-column>
          <el-table-column label="容量" align="center">
            <template slot-scope="scope">
              {{ JSON.parse(scope.row.spData)[1].value }}
            </template>
          </el-table-column>
          <el-table-column label="销售价格" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="商品库存" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.stock"> </el-input>
            </template>
          </el-table-column>
          <el-table-column label="库存预警值" align="center">
            <el-input v-model="undefined"> </el-input>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { fetchProductList, fetchSKUInfo, fetchSearchProduct, fetchClassifyData, fetchBranchData, fetchPubulicStatus } from '../../api/api.js'
import { removeProductItem } from '@/utils/utils'

export default {
  name: 'GoodsList',
  data() {
    return {
      // 定义搜索表单数据
      screenFormInfo: {
        // 商品名称
        keyword: '',
        // 商品货号
        productSn: '',
        // 商品分类
        productCategoryId: '',
        // 商品品牌
        brandId: '',
        // 上架状态
        publishStatus: '',
        // 审核状态
        verifyStatus: '',
      },
      options: [],
      value: '',
      flag: 'true',
      input: '',
      // 控制loading加载
      loading: true,
      // 商品列表
      productList: [],
      skuSave: [],
      // 控制弹窗显示隐藏
      dialogVisible: false,
      // SKU数据列表
      skuTableTitles: ['SKU编号', '颜色', '容量', '销售价格', '商品库存', '库存预警值'],
      // 当前商品货号
      currentProductSn: '',
      // 上架flag
      publicFlag: 1,
      // 新品flag
      newFlag: 1,
      // 推荐flag
      recommendFlag: 1,
      // 分类级联数据
      classifysData: [],
      total: 0,
      query: { pageNum: 1, pageSize: 5 },
      // 配置分类key属性
      classifysOptions: {
        label: 'name',
        value: 'id',
      },
      // 品牌级联数据
      brandsData: [],
      // 配置品牌key属性
      brandsOptions: {
        label: 'name',
        value: 'id',
      },
    }
  },
  methods: {
    // 请求商品列表所有数据
    async getProductList() {
      let products = await fetchProductList(this.query)
      this.loading = false
      let { list, total } = products.data
      this.productList = list
      this.total = total
    },
    // 请求SKU弹窗数据
    async handlerFetchSKU({ id, productSn }) {
      this.dialogVisible = true
      this.currentProductSn = productSn
      let skuInfo = await fetchSKUInfo(id)
      this.skuSave = skuInfo.data
    },
    // 处理搜索数据
    async handlesearchData() {
      let res = await fetchSearchProduct(this.screenFormInfo)
      this.productList = res.data.list
    },
    // 请求分类级联数据
    async fetchClassifyList() {
      let classifys = await fetchClassifyData()
      this.classifysData = classifys.data
    },
    // 请求品牌级联列表数据
    async fetchBranchList() {
      let brands = await fetchBranchData()
      this.brandsData = brands.data.list
    },
    pubulicStatus(val) {
      this.publicFlag = val
    },
    newStatus(val) {
      this.newFlag = val
    },
    commonStatus(val) {
      this.recommendFlag = val
    },
    async handlePubulicStatus() {
      let res = await fetchPubulicStatus()
      console.log(res)
    },
    // 打开删除弹窗
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          removeProductItem(this.productList, id)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 关闭SkU货品弹窗
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
  },
  created() {
    this.getProductList()
    this.fetchClassifyList()
    this.fetchBranchList()
    this.handlePubulicStatus()
  },
}
</script>
<style lang="scss" scoped>
.submit-container {
  margin-top: 15px;
}
.form-item-title {
  width: 110px;
  text-align: right;
  font-size: 14px;
  color: #606266;
  margin-right: 15px;
  line-height: 2.5;
}
.form-item {
  margin-right: 10px;
}
.dataList {
  padding: 18px 20px;
}
.screen-l .txt {
  padding-left: 6px;
}
::v-deep .el-table__body-wrapper {
  height: 100vh !important;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  height: 100vh !important;
  overflow-y: hidden !important;
}
::v-deep .el-table {
  height: 100% !important;
}
::v-deep .el-table__body {
  width: 100% !important;
}
::v-deep .el-table__header {
  width: 1296px !important;
}
.primary-txt {
  color: #409eff;
}
.layout-flex {
  display: flex;
  justify-content: space-around;
}
.search-btn {
  background: #f5f7fa;
}
.input-size {
  width: 200px !important;
  margin-right: 8px;
}
// ::v-deep .el-table__body-wrapper {
//   height: 100vh !important;
// }
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto !important;
}
.el-button {
  margin: 5px;
}
</style>
